<template>
<div class="merchandise-categories views-container">
    <share-link :config="shareLinkConfig" ref="sharelink">
        <template slot="title">-商品分类</template>
        <template slot="el-form-item">
            <el-form-item label="小程序路径" v-if="shareLinkConfig.params.qrUrl">
                <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.qrUrl" class="input-with-select">
                    <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.qrUrl,$event)">复制</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="公众号链接" v-if="shareLinkConfig.params.linkUrl">
                <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.linkUrl" class="input-with-select">
                    <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.linkUrl,$event)">复制</el-button>
                </el-input>
            </el-form-item>
             <el-form-item label="短链接" v-if="shareLinkConfig.params.h5_short_url">
                <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.h5_short_url" class="input-with-select">
                    <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.h5_short_url,$event)">复制</el-button>
                </el-input>
            </el-form-item>
        </template>
    </share-link>
    <el-dialog width="50%" @close="resetDialogFormData({parent_id:'', parent_name: {}, name: '', image: [], sort: '', status: 1,model:[]})" :visible.sync="dialogTableVisible" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form-dialog dialog-table" v-if="dialogTableVisible">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">{{`${!!formFormatData.api['editForm']['params']['id']?'编辑':'添加'}服务`}}</span>
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="wlm-form-content">
                    <div class="wlm-dialog-main">
                        <div class="wlm-dialog-content">
                            <el-form ref="userForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                                <el-form-item v-if="formFormatData.formData.parent_id > 0" label="上级分类">
                                    <span style="color:#409EFF;">{{formFormatData.formData.parent_name?formFormatData.formData.parent_name.name:''}}</span>
                                </el-form-item>
                                <el-form-item label="分类名称">
                                    <el-input v-model.trim="formFormatData.formData.name">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="分类图片">
                                    <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                    <div class="form-help">建议尺寸400*400</div>
                                </el-form-item>
                                <el-form-item label="状态">
                                    <el-radio-group v-model="formFormatData.formData.status">
                                        <el-radio :label="1">启用</el-radio>
                                        <el-radio :label="0">禁用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="排序">
                                    <el-input v-model.trim="formFormatData.formData.sort">
                                    </el-input>
                                </el-form-item>
                                 <el-form-item label="分类模式">
                                    <el-checkbox-group  v-model.trim="formFormatData.formData.model">
                                        <el-checkbox v-for="role in roledata" :label="role.value" :key="role.value">
                                          {{role.label}}
                                          </el-checkbox>
                                    </el-checkbox-group>
                                 </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" @click="formFormatSubmit" type="primary">保存</el-button>
        </footer>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleImg" width="50%" custom-class="reset-pwd wlm-form-dialog dialog-table">
      <div class="wlm-form">
        <div class="wlm-form-header wlm-dialog-fixheader">
          <span class="wlm-dialog-inlenr">批量设置模式</span>
        </div>
          <el-form ref="userForm" :model="formFormatData.formData" size="small" label-width="80px" class="retail-form" label-position="right">
              <el-form-item label="模式选择" >
                 <el-checkbox-group  v-model="formFormatData.formData.model">
                           <el-checkbox v-for="role in roledata" :label="role.value" :key="role.value">
                             {{role.label}}
                            </el-checkbox>
                      </el-checkbox-group>
              </el-form-item>
          </el-form>
              <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" @click="savebtn" :loading="btnloading" type="primary">保存</el-button>
        </footer>
      </div>
    </el-dialog>
    <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
            <!-- <router-link tag="span" to="/merchandise/merchandiseCategoriesAdd"></router-link> -->
            <el-button size="small" @click="dialogTableVisible = true" type="primary">添加分类</el-button>
        </div>
        <div class="wlm-table-header">
            <el-form :model="tableFormatData.userTable.files" size="small" label-width="80px" class="retail-form" label-position="right">
                <el-form-item label="分类名称：" class="search">
                    <el-input v-model="tableFormatData.userTable.files.name" placeholder="请输入分类名称" style="width:160px;"></el-input>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button v-waves type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-table :ref="tableFormatData.userTable.key" :data="filterTable" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-table class="expand" :data="props.row.child" @selection-change="handleSelectionChange" style="width: 100%">
                            <el-table-column
                                    type="selection"
                                    width="55">
                                  </el-table-column>
                            <el-table-column prop="date" label="分类名称" align="left">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.parent_id>0">&nbsp;&nbsp;&nbsp;&nbsp;--{{scope.row.name}}</span>
                                    <span v-else>{{scope.row.name}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" label="分类图片">
                                <template slot-scope="scope">
                                    <img v-if="scope.row.image" class="logo" :src="scope.row.image.file_path">
                                    <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="商品数量">
                                <template slot-scope="scope">
                                    <router-link v-if="scope.row.parent_id === 0" class="wlm-text" tag="span" :to="{path:'/merchandise/merchandiseManagement', query:{category_id:scope.row.category_id}}">
                                        <el-button type="text">{{scope.row.goodsnum}}</el-button>
                                    </router-link>
                                    <span v-if="scope.row.parent_id > 0">{{scope.row.goodsnum}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="状态">
                                <template slot-scope="scope" v-if="scope.row.status === 0 || scope.row.status === 1">
                                    <el-switch :active-value="1" :inactive-value="0" @change="changeTableItem({category_id:scope.row.category_id,status:scope.row.status},tableFormatData.userTable.change.status,{isWarning: scope.row.status === 0,warning:`${scope.row.parent_id>0?'确认关闭吗？':'关闭分类后，将关闭所有二级分类，确认关闭吗？'}`,cancel:{msg:'已取消关闭',val:{scope:scope,cancelStatus:{key:'status',val:1}}}})" v-model="scope.row.status"> </el-switch>
                                </template>
                            </el-table-column>
                             <el-table-column prop="data" label="模式">
                                      <template slot-scope="scope" >
                                     <!-- <span v-if="scope.row.model">{{scope.row.model}}</span> -->
                                     <div v-for="item in scope.row.model" :key="item">
                                       <span v-if="item=='shop'">普通商城</span>
                                       <span v-if="item=='cgp'">社区团购</span>
                                       <span v-if="item=='shop' && item=='cgp'">普通商城 社区团购</span>
                                     </div> 
                                   </template>
                             </el-table-column>
                            <el-table-column prop="sort" label="排序" sortable="custom">
                                <template slot-scope="scope">
                                    <span>{{scope.row.sort}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <div class="operation-group">
                                        <template v-if="scope.row.parent_id===0">
                                            <!-- <router-link class="wlm-text" tag="span" :to="{path:'/merchandise/merchandiseCategoriesLowerAdd', query:{parent_id:scope.row.category_id,name:scope.row.name}}">
                                                <el-button type="text">添加下级</el-button>
                                            </!-->
                                            <el-button class="wlm-text" type="text" @click="formFormatData.formData.parent_id =  scope.row.category_id;formFormatData.formData.parent_name.name = scope.row.name;dialogTableVisible = true;">添加下级</el-button>
                                            <div class="btn-line"></div>
                                            <el-button class="wlm-text" type="text" @click="formFormatDialogEditEvt({id:scope.row.category_id, toggle:'dialogTableVisible'})">编辑</el-button>
                                            <!-- <router-link  class="wlm-text" v-if="scope.row.parent_id===0" tag="span" :to="{path:'/merchandise/merchandiseCategoriesAdd', query:{category_id:scope.row.category_id}}">
                                                <el-button type="text">编辑</el-button>
                                            </router-link> -->
                                            <div class="btn-line"></div>
                                        </template>
                                        <template v-if="scope.row.parent_id>0">
                                            <el-button class="wlm-text" type="text" @click="formFormatDialogEditEvt({id:scope.row.category_id, params: { parent_id: scope.row.parent_id }, toggle:'dialogTableVisible'})">编辑</el-button>
                                            <!-- <router-link v-if="scope.row.parent_id>0" class="wlm-text" tag="span" :to="{path:'/merchandise/merchandiseCategoriesLowerAdd', query:{category_id:scope.row.category_id}}">
                                                <el-button type="text">编辑</el-button>
                                            </router-link> -->
                                            <div class="btn-line"></div>
                                        </template>
                                        <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.category_id)">删除</el-button>
                                        <div class="btn-line"></div>
                                        <el-button class="wlm-text" type="text" @click="sharelink(scope.row.category_id,scope.row.parent_id)">推广</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="分类名称" align="left">
                    <template slot-scope="scope">
                        <!-- <router-link tag="span" :to="{path:'/user/managementUserEdit', query:{id:scope.row.id}}">
                            <span class="pointer">{{scope.row.name}}</span>
                        </router-link> -->
                        <span v-if="scope.row.parent_id>0">&nbsp;&nbsp;&nbsp;&nbsp;--{{scope.row.name}}</span>
                        <span v-else>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="分类图片">
                    <template slot-scope="scope">
                        <img v-if="scope.row.image" class="logo" :src="scope.row.image.file_path">
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品数量">
                    <template slot-scope="scope">
                        <router-link v-if="scope.row.parent_id === 0" class="wlm-text" tag="span" :to="{path:'/merchandise/merchandiseManagement', query:{category_id:scope.row.category_id}}">
                            <el-button type="text">{{scope.row.goodsnum}}</el-button>
                        </router-link>
                        <span v-if="scope.row.parent_id > 0">{{scope.row.goodsnum}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="状态">
                    <template slot-scope="scope" v-if="scope.row.status === 0 || scope.row.status === 1">
                        <el-switch :active-value="1" :inactive-value="0" @change="changeTableItem({category_id:scope.row.category_id,status:scope.row.status},tableFormatData.userTable.change.status,{isWarning: scope.row.status === 0,warning:`${scope.row.parent_id>0?'确认关闭吗？':'关闭分类后，将关闭所有二级分类，确认关闭吗？'}`,cancel:{msg:'已取消关闭',val:{scope:scope,cancelStatus:{key:'status',val:1}}}})" v-model="scope.row.status"> </el-switch>
                    </template>
                </el-table-column>
                    <el-table-column prop="data" label="模式" min-width="70px">
                                   <template slot-scope="scope" >
                                     <!-- <span v-if="scope.row.model">{{scope.row.model}}</span> -->
                                     <div v-for="item in scope.row.model" :key="item">
                                       <span v-if="item=='shop'">普通商城</span>
                                       <span v-if="item=='cgp'">社区团购</span>
                                       <span v-if="item=='shop' && item=='cgp'">普通商城 社区团购</span>
                                     </div> 
                                   </template>
                             </el-table-column>
                <el-table-column prop="sort" label="排序" sortable="custom">
                    <template slot-scope="scope">
                        <span>{{scope.row.sort}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="100px">
                    <template slot-scope="scope">
                        <div class="operation-group">
                            <template v-if="scope.row.parent_id===0">
                                <el-button class="wlm-text" type="text" @click="formFormatData.formData.parent_id =  scope.row.category_id;formFormatData.formData.parent_name.name = scope.row.name;dialogTableVisible = true;">添加下级</el-button>
                                <!-- <router-link class="wlm-text" tag="span" :to="{path:'/merchandise/merchandiseCategoriesLowerAdd', query:{parent_id:scope.row.category_id,name:scope.row.name}}">
                                    <el-button type="text">添加下级</el-button>
                                </router-link> -->
                                <div class="btn-line"></div>
                                <el-button class="wlm-text" type="text" @click="formFormatDialogEditEvt({id:scope.row.category_id, toggle:'dialogTableVisible'})">编辑</el-button>
                                <!-- <router-link v-if="scope.row.parent_id===0" class="wlm-text" tag="span" :to="{path:'/merchandise/merchandiseCategoriesAdd', query:{category_id:scope.row.category_id}}">
                                    <el-button type="text">编辑</el-button>
                                </router-link> -->
                                <div class="btn-line"></div>
                            </template>
                            <template v-if="scope.row.parent_id>0">
                                <el-button v-if="scope.row.parent_id>0" class="wlm-text" type="text" @click="formFormatDialogEditEvt({id:scope.row.category_id, params: { parent_id: scope.row.parent_id }, toggle:'dialogTableVisible'})">编辑</el-button>
                                <!-- <router-link v-if="scope.row.parent_id>0" class="wlm-text" tag="span" :to="{path:'/merchandise/merchandiseCategoriesLowerAdd', query:{category_id:scope.row.category_id}}">
                                    <el-button type="text">编辑</el-button>
                                </router-link> -->
                                <div class="btn-line"></div>
                            </template>
                            <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.category_id)">删除</el-button>
                            <div class="btn-line"></div>
                            <el-button class="wlm-text" type="text" @click="sharelink(scope.row.category_id,scope.row.parent_id)">推广</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-b flex-align-c">
                <el-row class="pagination-btns">
                    <el-checkbox class="check-all"  true-label="1" false-label="0" v-model="tableFormatData.userTable.files.checkall" @change="toggleSelection">全部</el-checkbox>
                   <el-button class="right-8" :disabled="isGroupBtn" size="mini" @click="TableListbtn">设置模式</el-button>
                </el-row>
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  goodsclassEdit,
  goodsclassGet,
  goodsclassIndex,
  goodsclassDelete,
  reviseStatus,
  categoryExtension,
  classModel
} from '@/api/merchandise'
import ChooseFiles from '@/components/ChooseFiles/index'
import ShareLink from '@/components/ShareLink/index'
import clipboard from '@/utils/clipboard'
import waves from '@/directive/waves' // Waves directive
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'userTable',
  components: {
    ChooseFiles,
    ShareLink
  },
  directives: {
    waves
  },
  computed: {
    filterTable() {
      const tableData = this.tableFormatData.userTable.tableData
      const tableDataArr = Object.keys(tableData)
      const result = []
      if (Array.isArray(tableDataArr)) {
        tableDataArr.map((item, index) => {
          result.push(tableData[item])
        })
      }
      return result
    },
    isGroupBtn(){
      return this.thistabledata.length==0
    }
  },
  data() {
    return {
      btnloading:false,
      thistabledata:[],
      isMounted: false,
      dialogTableVisible: false,
      dialogVisibleImg:false,
      tabledata:[],
      roledata:[ 
       {label:'普通商城',value:'shop'},
      {label:'社区团购',value:'cgp'},
        ],
      shareLinkConfig: {
        current: 'weChatQr',
        params: {
          qrUrl: '',
          linkUrl: '',
          h5_short_url:'',
        }
      },
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'image',
          model: 'img'
        }
      },
      formFormatData: {
        key: 'userForm',
        model: {
          noCreateEdit: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            api: goodsclassGet,
            params: {},
            filters: {
              img: {
                bindInit: ['chooseLogoConfig']
              }
            },
            redirect: 'category_id'
          },
          submitForm: goodsclassEdit
        },
        formData: {
          parent_id: '',
          parent_name: {},
          name: '',
          image: [],
          sort: '',
          status: 1,
          model:[],
        },
        rules: {
        }
      },
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: goodsclassIndex,
            delList: goodsclassDelete
          },
          tableData: {
            redirect: 'filterTable'
          },
          files: {
            name: '',
            ids: [],
            checkall: '0',
            redirect: 'category_id'
          },
          change: {
            status: {
              //   name: '编辑',
              key: 'status',
              api: reviseStatus
            }
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  created() {

  },
  methods: {
    savebtn(){
      this.btnloading = true
            let category = []

            this.thistabledata.map(res=>{
              category.push(res.category_id)
              console.log("0000000000000000",res.child)
              if(!!res.child){
                res.child.map(item=>{
                  category.push(item.category_id)
                })
              }
            })
            console.log("123",category)
            console.log("456",this.formFormatData.formData.model)
        classModel({category_id:category,model:this.formFormatData.formData.model}).then(res=>{
          if(res.data.code==1){
            this.$message.success(res.data.msg)
            this.dialogVisibleImg = false
            this.btnloading = false
            this.filesSerch()
          }
        }).finally(()=>{
        this.dialogVisibleImg = false
            this.btnloading = false
        })

    },
    TableListbtn(){
      this.dialogVisibleImg = true
    },
    handleSelectionChange(val){
      console.log("fdsfdsfdf",val)
      this.thistabledata = val
        //  this.$refs.userTable.toggleRowSelection(res.child,true)
    },
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    changeTableCallBack({ event }) {
      if (!this.isMounted && event === 'getList') {
        this.sortChange({ order: 'ascending' })
        this.isMounted = true
      }
    },
    sharelink(category_id, parent_id) {
      categoryExtension({ category_id: category_id, parent_id: parent_id }).then((response) => {
        const { data: { data: { sapp_url, h5_url,h5_short_url } } } = response
        this.shareLinkConfig.params.qrUrl = sapp_url
        this.shareLinkConfig.params.linkUrl = h5_url
        this.shareLinkConfig.params.h5_short_url = h5_short_url
        this.shareLinkConfig.current = 'linkpath'
      })
      this.shareLinkConfig.params.category_id = category_id
      this.$refs.sharelink.toggle()
    },
    sortChange({ order }) {
      switch (order) {
        case 'descending':
          this.tableFormatData.userTable.tableData.sort((a, b) => { return a.sort - b.sort })
          this.tableFormatData.userTable.tableData.map(item => {
            const { child = [] } = item
            if (child.length > 0) {
              child.sort((a, b) => { return a.sort - b.sort })
            }
          })
          break
        case 'ascending':
          this.tableFormatData.userTable.tableData.sort((a, b) => { return b.sort - a.sort })
          this.tableFormatData.userTable.tableData.map(item => {
            const { child = [] } = item
            if (child.length > 0) {
              child.sort((a, b) => { return b.sort - a.sort })
            }
          })
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.merchandise-categories {
    .logo {
        height: 32px;
        width: 32px;
        border-radius: 32px;
        vertical-align: middle;
    }

    // /deep/ .el-table__expanded-cell{
    //   padding: 0 0 0 45px;
    //   border-bottom: none;
    // }
    // /deep/ .expand{
    //   .el-table__header-wrapper{
    //     display: none;
    //   }
    // }
}
</style>
